<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查询角色集合</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/v2.6.10/vue.min.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v2.6.10/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 搜索框 -->
			<el-row>
				<el-col :span="6"><el-input style="display:inline" v-model="search"
						placeholder="请输入搜索内容"></el-input></el-col>
				&nbsp;
				<el-button @click="searchMeaasge" icon="el-icon-search" type="primary">搜索</el-button>
			</el-row>
			<!-- 展示表格 -->
			<el-table :data="tableData" border style="width: 100%" size="medium">
				<el-table-column prop="id" label="角色id" width="180">
				</el-table-column>
				<el-table-column prop="roleName" label="角色名称" width="180">
				</el-table-column>
				<el-table-column prop="description" label="角色部门" width="180">
				</el-table-column>
				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button type="primary" plain size="small"
							@click="add(scope.$index, scope.row)">新增</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" type="info" plain
							@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="warning" plain @click="handleDelete(scope.row.id)">删除</el-button>
						<el-button size="mini" type="success" plain
							@click="upRoleMenu(scope.$index, scope.row)">角色菜单</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 抽屉 -->
			<el-drawer title="角色菜单维护" :visible.sync="drawer" :with-header="true">
				&nbsp;
				<el-button type="success" plain size="big" @click="upRoleMenuSubmit()">确定修改角色菜单</el-button>
				<!-- 菜单树:生成树 -->
				<el-tree @check="trchange" ref="tree" :data="treedata" show-checkbox check-strictly="true"
					default-expand-all node-key="id" highlight-current>
				</el-tree>
			</el-drawer>
			<!-- 增加菜单对话框 -->
			<el-dialog title="增加角色" :visible.sync="dialogFormVisibleAdd">
				<el-form :model="formAdd">
					<el-form-item label="角色名称" label-width="80px">
						<el-input v-model="formAdd.roleName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="角色部门" label-width="80px">
						<el-input v-model="formAdd.description" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑菜单对话框 -->
			<el-dialog title="编辑角色" :visible.sync="dialogFormVisibleEdit">
				<el-form :model="formEdit">
					<el-form-item label="角色名称" label-width="80px">
						<el-input v-model="formEdit.roleName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="角色部门" label-width="80px">
						<el-input v-model="formEdit.description" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
					<el-button type="primary" @click="editsubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				treedata: [], // 菜单树的数据
				drawer: false, // 控制角色菜单维护抽屉的显示
				search: "", // 搜索内容
				tableData: [], // 表格显示数据
				dialogFormVisibleAdd: false, // 控制新增表单弹出
				formAdd: { // 新增表单
					roleName: "",
					description: "",
				},
				dialogFormVisibleEdit: false, // 控制修改表单
				formEdit: { // 修改表单
					roleName: "",
					description: ""
				},
				nowRoleId: 0 // 当前要修改的哪一行的角色id
			},
			methods: {
				// 树的复选框事件
				trchange(a, b) {
					let treeNowArr = this.$refs.tree.getCheckedKeys(); // 获取树当前选中的所有节点
					treeNowArr.push(a.parentId); // 把当前节点的父id加到树里面[父子关联]
					// 如果子节点不为空的话
					if (a.children != null) {
						const childIdArr = a.children.map((obj) => obj.Id) // 获取当前节点的所有子节点的id集合
						// 过滤掉子节点,得到父节点
						treeNowArr = treeNowArr.filter(item => !childIdArr.includes(item.Id));
					}
					this.$refs.tree.setCheckedKeys(treeNowArr); // 设置选中
				},
				//确定修改角色菜单的按钮
				upRoleMenuSubmit(i, row) {
					let treeNowArr = this.$refs.tree.getCheckedKeys(); // 获取树当前选中的所有节点
					let that = this;
					//console.log(treeNowArr);
					axios.post(API + "updateRoleMenuId", {
							roleId: that.nowRoleId,
							listMenu: treeNowArr
						})
						.then((res) => {
							console.log(res);
							this.$alert("修改成功", '消息提示', {
								confirmButtonText: '确定',
								callback: action => {}
							});
						}).catch(err => {
							console.log(err);
						});
					that.drawer = false; // 关闭抽屉
				},
				// 角色菜单按钮
				upRoleMenu(i, row) {
					this.nowRoleId = row.id; // 设置当前修改的角色id
					// 初始化树的数据
					this.selectAllMenu();
					let that = this;
					// 根据角色id获取他的菜单集合
					axios.get(API + "selectRoleMenuByRoleId/" + row.id)
						.then(function(res) {
							console.log(res.data.data.rolemenuList);
							let slist = res.data.data.rolemenuList;
							// 得到 menuid数组集合
							const arr = slist.map((obj) => obj.menuId);
							// 设置选中
							that.$refs.tree.setCheckedKeys(arr);
							console.log(arr);
						}).catch(err => {
							console.log(err);
						});
					// 打开抽屉
					this.drawer = true;
				},
				// 初始化树菜单数据:获取所有的menu数据,填充父级菜单下拉列表
				selectAllMenu() {
					let that = this;
					// 获取所有的父级菜单集合
					axios.get(API + "selectMenu")
						.then(function(res) {
							//console.log(res.data.data.menuList);
							let arrs = arrayToTree(res.data.data.menuList);
							that.treedata = arrs;
						}).catch(err => {
							console.log(err);
						});
				},
				// 删除方法
				handleDelete(id) {
					this.$confirm('此操作将删除该数据,是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						center: true,
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						axios.get(API + "deleteRoleById", {
							params: {
								id: id
							}
						}).then((result) => {
							//alert(result.data);
							this.initRoleData();
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				// 搜索按钮
				searchMeaasge() {
					this.initRoleData();
				},
				// 新增提交按钮
				addsubmit() {
					// 非空判断
					if (this.formAdd.roleName == "") {
						this.$message({
							showClose: true,
							message: '警告哦，角色名称不能为空!',
							type: 'warning'
						});
					} else if (this.formAdd.description == "") {
						this.$message({
							showClose: true,
							message: '警告哦，角色部门不能为空!',
							type: 'warning'
						});
					}else{
						// 调用新增接口
						axios.post(API + "insertRole",
							this.formAdd
						).then((result) => {
							//alert(result.data);
							this.$alert(result.data, '消息提示', {
								confirmButtonText: '确定',
								callback: action => {}
							});
							// 新增成功后,清空输入框
							this.formAdd = {
								roleName: "",
								description: "",
							};
							this.dialogFormVisibleAdd = false;
							this.initRoleData();
						})
					}	
				},
				// 新增按钮弹出对话框
				add() {
					this.dialogFormVisibleAdd = true; // 打开新增对话框
				},
				// 编辑按钮弹出修改框
				handleEdit(index, row) {
					this.dialogFormVisibleEdit = true; // 打开修改框
					//console.log(index, row);
					//修改之前,根据 id从后端获取数据
					let that = this;
					axios.get("http://localhost:8082/db137/selectRoleById?id=" + row.id)
						.then(function(res) {
							console.log(res.data.data.roleById);
							that.formEdit.id = res.data.data.roleById.id;
							that.formEdit.roleName = res.data.data.roleById.roleName;
							that.formEdit.description = res.data.data.roleById.description;
						}).catch(err => {
							console.log(err);
						});
				},
				// 提交修改按钮
				editsubmit() {
					// 调用编辑接口
					axios.post(API + "updateRole",
						this.formEdit
					).then((result) => {
						//alert(result.data);
						this.$alert(result.data, '消息提示', {
							confirmButtonText: '确定',
							callback: action => {}
						});
						// 编辑成功后,清空输入框
						this.formEdit = {
							roleName: "",
							description: "",
						};
						this.dialogFormVisibleEdit = false;
						this.initRoleData();
					})
				},
				// 初始化查询角色列表
				initRoleData() {
					let that = this;
					axios.get(API + "selectRole", {
						params: {
							description: this.search
						}
					}).then(function(res) {
						console.log(res.data.data.roleList);
						that.tableData = res.data.data.roleList;
					}).catch(err => {
						console.log(err);
					});
				}
			},
			mounted() {
				this.initRoleData();
			}
		})
	</script>
</html>